<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人注册</title>
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
  <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../css/mimazhaohui.css">
  <link rel="stylesheet" href="../font/iconfont.css">
</head>

<body>
  <div id="back">
    <div class="container">
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-5">
          <div id="logo"></div>

          <div id="form">
            <h3>密码找回</h3>
            <div class="green"></div>

            <div id="tel">
              <input type="text" placeholder="请输入手机号码" name="username"> <button id="ma">验证码</button>
            </div>
            <p id="phone">输入手机号码错误</p>

            <div id="yanzheng">
              <input type="text" placeholder="请输入验证码" id="code">
              <div>1111</div>
            </div>
            <p id="err">输入验证码错误</p>

            <div id="eye">
              <input type="password" placeholder="请输入新密码" name="password">
              <div id="div1">
                <span class="iconfont icon-mimaguan"></span>
              </div>
              <p> </p>

              <!-- <div id="div2">
                <span class="iconfont icon-mimakai" id="span2"></span>
              </div> -->

            </div>

            <div id="again">
              <input type="password" placeholder="再次确认密码" name="password">
            </div>
            <p id="notpi">输入密码不匹配</p>
            <div>
              <button id="register">确定</button>
            </div>


          </div>
        </div>
        <div class="col-md-3"></div>
      </div>
    </div>
  </div>

</body>

</html>
<script>

  let a = function () {
    if ($('#eye input').val() == "") {
      $("#div1").css({
        display: "none"
      })
    } else {
      $("#div1").css({
        display: "block"
      })
    }
  }
  $('#eye>input').focus(() => {
    setInterval(a, 1)
  })

  $('#eye>input').focus(function () {
    if ($("#div1>span").attr('class') == 'iconfont icon-mimakai' && $('#eye input').attr('type') == 'text') {
      $("#div1>span").attr('class', 'iconfont icon-mimaguan')
      $('#eye input').attr('type', 'password')
    } else {
      $("#div1>span").attr('class', 'iconfont icon-mimaguan')
      $('#eye input').attr('type', 'password')
    }
  })


  $("#div1").click(function () {

    if ($("#div1>span").attr('class') == 'iconfont icon-mimaguan') {
      $("#div1>span").attr('class', 'iconfont icon-mimakai')
    } else {
      $("#div1>span").attr('class', 'iconfont icon-mimaguan')
    }
  })





  $('#ma').click(function () {

    if ($('#yanzheng div')[0].style.display == 'none') {
      $('#yanzheng div').css({
        display: 'block'
      })
      telphone()
    }
    else {
      $('#yanzheng div').css({
        display: 'none'
      })
    }
  })


  $('#yanzheng div').click(function () {
    telphone()
  })


  function telphone() {
    let num = "";
    let n = 4;
    for (let i = 0; i < n; i++) {
      num += parseInt(Math.random() * 9)
    }
    $('#yanzheng div').text(num)

    $('#code').change(function () {
      console.log(num)
      if ($('#code').val() != num) {

        $('#err').css({
          opacity: 1
        })
      } else {
        $('#err').css({
          opacity: 0
        })
      }
    })
  }
  //手机验证码
  let str;
  let reg;
  $('#tel input').change(function () {
    str = $('#tel input').val();
    reg = /1[3-9]\d{9}/;
    if (reg.test(str) == true) {
      $('#phone').css({
        opacity: 0
      })
    } else {
      $('#phone').css({
        opacity: 1
      })
    }
  })

  //点击新密码
  $('#again input').change(function () {
    if ($('#eye input').val() != $('#again input').val()) {
      $('#notpi').css({
        opacity: 1
      })

    } else {
      $('#notpi').css({
        opacity: 0
      })
    }
  })

  //密码显示与隐藏
  $('#div1').click(function () {
    if ($('#eye input').attr('type') == 'password') {
      $('#eye input').attr('type', 'text')
    } else {

      $('#eye input').attr('type', 'password')
    }
  })

  //点击确定按钮
  $('#register').click(function () {

    if (reg.test(str) == true && $('#eye input').val() == $('#again input').val()) {
      $.ajax({
        url: '/submit',
        method: 'post',
        data: {
          telphone: $('#tel input[name=username]').val(),
          password: $('#again input').val()
        },
        success: (res) => {
          console.log(res)
        }

      })
    }
  })





</script>